<template>
  <div class="ant-card">
    <div class="user">
      <div>
        <p style="margin-right:20px;  margin-bottom: 0;">人员定位</p>
        <a-select
          placeholder="请选择"
          style="width: 200px"
          show-search
          option-filter-prop="children"
          :filter-option="filterOption"
          @change="handleChange"
        >
          <a-select-option
            v-for="(item,index) in dataList"
            :value="item.id"
            :key="index"
          >{{item.name}}</a-select-option>
        </a-select>
        <a-range-picker show-time @change="onChange" style="margin-left:20px;" />
        <a-button style="margin-left:15px;" type="primary" @click="userSearch">搜索</a-button>
      </div>
      <a-button type="primary" @click="navigationSearch">导航路径</a-button>
    </div>

    <template>
      <baidu-map id="map" :center="center" :zoom="15" :scroll-wheel-zoom="true">
        <bm-marker :position="center" @click="infoWindowOpen">
          <bm-info-window :show="show" @close="infoWindowClose" @open="infoWindowOpen">北京欢迎您</bm-info-window>
        </bm-marker>
        <bm-polyline
          :path="polylinePath"
          stroke-color="red"
          :stroke-opacity="0.5"
          :stroke-weight="4"
          :editing="false"
          @lineupdate="updatePolylinePath"
        ></bm-polyline>
      </baidu-map>
    </template>
  </div>
</template>
<script>
import JSelectDepart from '@/components/jeecgbiz/JSelectDepart'
import { deleteAction, getAction, downFile } from '@/api/manage'
export default {
  components: {
    JSelectDepart
  },
  data() {
    return {
      center: { lng: 116.404, lat: 39.915 }, //定位, 可使用如“广州市海珠区”的地区字符串，也可以使用对象如 {lng: 116.404, lat: 39.915} 表示经纬度
      show: false,
      dataList: [],
      userID: '',
      polylinePath: [],
      shiJianBegin: '',
      shiJianEnd: ''
    }
  },
  created() {
    this.personnelList()
  },
  methods: {
    // 跳转
    navigationSearch() {
      window.open('https://map.baidu.com/search')
    },
    // 日期选择
    onChange(date, dateString) {
      ;(this.shiJianBegin = dateString[0]), (this.shiJianEnd = dateString[1])
    },
    // 人员选择搜索
    userSearch() {
      getAction(
        `/org.jeecg.modules.gkak.primary/gkakRJianKangXinXi/getLocationByUserInfo?userId=${this.userID}&shiJianBegin=${this.shiJianBegin}&shiJianEnd=${this.shiJianEnd}`,
        {}
      ).then(res => {
        let data = res.result
        let newArr = data[data.length - 1]
        this.center = { lng: newArr.longitude, lat: newArr.latitude }
        data &&
          data.forEach(k => {
            this.polylinePath.push({
              lng: k.longitude,
              lat: k.latitude
            })
          })
      })
      // console.log(this.polylinePath, 'this.polylinePath')
      // let data = [
      //   { lng: 116.404, lat: 39.915 },
      //   { lng: 116.405, lat: 39.92 },
      //   { lng: 116.423493, lat: 39.907445 },
      //   { lng: 116.413493, lat: 39.907845 }
      // ]
      // let newArr = data[data.length - 1]
      // this.center = { lng: newArr.lng, lat: newArr.lat }
      // data &&
      //   data.forEach(k => {
      //     this.polylinePath.push({
      //       lng: k.lng,
      //       lat: k.lat
      //     })
      //   })
    },
    //人员信息
    personnelList() {
      // this.keyword='中国航发'
      getAction('/gkakSysUserController/getUserIdName', {
        // token: JSON.parse(localStorage.getItem('pro__Access-Token')).value
      }).then(res => {
        this.dataList = res.result
      })
    },
    //下拉搜索框
    handleChange(value) {
      this.userID = value.toString()
      // this.center = { lng: 116.404, lat: 39.915 }
      // getAction(`/org.jeecg.modules.gkak.primary/gkakRJianKangXinXi/getLocationByUserInfo?userId=${value}`, {}).then(
      //   res => {
      //     let data = res.result
      //     this.center = { lng: data.longitude, lat: data.latitude }
      //   }
      // )
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    // 地图
    infoWindowClose() {
      this.show = false
    },
    infoWindowOpen() {
      this.show = true
    },
    updatePolylinePath(e) {
      this.polylinePath = e.target.getPath()
    }
  }
}
</script>
<style>
.ant-layout-content > div:last-child {
  margin: 12px 12px 0px 0px !important;
}
.tab-layout-tabs.ant-tabs {
  z-index: 1;
}
#map {
  width: 100%;
  margin: auto;
  position: fixed !important;
  text-align: left;
  top: 0;
  bottom: 0;
}
.user {
  font-size: 16px;
  font-weight: 800;
  position: fixed;
  z-index: 200;
  left: 12%;
  display: flex;
  width: 88%;
  left: 11%;
}
.user div:first-child {
  display: flex;
  align-items: center;
  width: 100%;
}
/* .user div:first-child ul {
  width: 100%;
} */
</style>